<template>
  <div v-loading="loading" class="file-view-box">
    <div class="box-bg full-view" id="fileBox" v-if="file.url" @dblclick="fullScreen">
      <div class="btns" :class="['file-type'+file.fileType]" v-show="!loading && file.url">
        <span class="icon-btn iconfont" v-if="isDownload && file.fileType==1" @click="download">&#xe668;</span>
        <span class="icon-btn iconfont full-btn" @click="fullScreen" v-show="!loading">&#xe66f;</span>
      </div>
      <iframe :src="file.url" frameborder="0" class="file-view" id="iframe" :key="file.url"></iframe>
    </div>
    <div class="no-data" v-else>没有相关文件 </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => { return {} }
    },
    server: "",
    downloadable: {
      type: Boolean,
      default: true,
    }
  },
  components: {
  },
  data() {
    return {
      query: {},
      file: {
        fileName: "",
        url: "",
        filePath: "",
        fileExtend: "",
      },
      service: "ms",
      loading: false,
      show: true,
      isFullScreen: false,
      isDownload: true,
    }
  },
  watch: {
    "data.filePath"() {
      this.setFileData();
    }
  },
  created() {
    this.query = this.$route.query || {};
    this.service = this.query.server || this.server || "ms";
  },
  mounted() {
    this.setFileData();
    window.addEventListener('resize', this.onresize);
    // window.addEventListener('message', function (e) {
    //   const da = e.data;
    // });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onresize)
  },
  computed: {

  },
  methods: {
    setFileData() {
      if (location.pathname == "/collect") {
        this.isDownload = false;
      } else {
        this.isDownload = this.downloadable;
      }
      this.file.fileName = this.data.fileName || this.data.name || this.query.fileName || "";
      this.file.fileExtend = this.data.fileExtend || this.query.fileExtend || "";
      this.file.fileType = this.data.fileType || this.query.fileType || 1;
      this.file.filePath = this.data.filePath || this.query.filePath;
      if (this.file.fileType == 1) {
        this.file.url = this.func.fileView(this.file.filePath, this.service);
      } else {
        this.file.url = this.file.filePath;
      }
      if (!this.file.filePath) {
        return;
      }
      this.loading = true;
      var iframe = document.getElementById('iframe');
      if (!iframe) {
        this.loading = false;
        return;
      }
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.loading = false;
        })
      } else {
        iframe.onload = () => {
          this.loading = false;
        }
      }
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 1000);
    },
    fullScreen() {
      let fullScreen = new this.func.fullScreen();
      this.isFullScreen = !this.isFullScreen;
      if (this.isFullScreen) {
        fullScreen.enterFullscreen(document.getElementById('fileBox'));
      } else {
        fullScreen.exitFullscreen();
      }
    },
    download() {
      this.loading = true;
      this.httpUpload("get", this.file.filePath).then(res => {
        this.loading = false;
        let fileExtend = this.file.fileExtend.replace(/\./g, "");
        if (this.file.fileName.indexOf("." + fileExtend) > 0) {
          this.func.fileDownload(res, `${this.file.fileName}`);
        } else {
          this.func.fileDownload(res, `${this.file.fileName}.${fileExtend}`);
        }
      }).catch(() => {
        this.loading = false;
      })
    },
    onresize(event) {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      let winFlag = window.innerHeight === window.screen.height
      // 利用window全屏标识来判断 -- IE无效
      let isFull = window.fullScreen || document.webkitIsFullScreen
      if (isFull === undefined) {
        this.isFullScreen = winFlag
      } else {
        this.isFullScreen = winFlag || isFull
      }
    },
  },
}
</script>
<style lang="scss" scope>
.file-view-box {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #484848;
  .full-view {
    position: absolute;
    left: 0px;
    top: 0;
    right: 0px;
    bottom: 0;
    .btns {
      position: absolute;
      right: 15px;
      top: 2px;
      .icon-btn {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        margin-right: 0px;
        font-size: 14px;
        display: inline-block;
        // font-weight: 400;
        background-color: rgba(0, 0, 0, 0.1);
        &:hover {
          background-color: rgba(0, 0, 0, 0.2);
          cursor: pointer;
        }
        &.full-btn {
          color: #f0f0f0;
        }
      }
      &.file-type2 {
        right: 24px;
        top: 24px;
        .icon-btn {
          font-size: 0px;
          height: 16px;
          width: 16px;
          border-radius: 0%;
          background-color: rgba(0, 0, 0, 0);
          // color: #ddd;
        }
      }
    }
  }
  .no-data {
    color: #ccc;
    position: absolute;
    text-align: center;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translate(0%, -50%);
  }
  .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .file-view {
    height: 100%;
    width: 100%;
  }
}
</style>